<template>
    <div style="background-color:#F7F8FA;width:1920px;">
        <!-- 顶部蓝色图片 -->
        <div id="img-bar"></div>

        <!-- 搜索 -->
        <div id="search">
            <div class="search-box">
                <input type="text" placeholder="搜索职位、公司" class="search-textbox" id="sText" v-on:input="onChange">
                <div class="search-btn" @click="search()">搜索</div>
                <div class="tip-box"
                 :class="{hoverShwing:tipshow == 1,tipboxhide:tipshow == 0}">
                    <p v-for="(i,index) in controlTipList" :key="i" v-html="i" 
                    @click="exitSearch(tipList[index].name)">
                    </p>
                </div>
                <div class="hot-professions">
                    热门职位：
                    <ul>
                        <li v-for="i in hotjobList" :key="i" @click="toSJob(),exitSearch(i)">{{i}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 职位选择和banner -->
        <div id="banner">
            <div class="banner-left" @mouseout="HideAll()">
                <ul class="show-list">
                    <li v-for="(job,jindex) in jobTypeList.slice(0, 6)" :key="job" @mouseover="achange(jindex)"
                    @mouseout="aout()">
                        <span>{{job.name}}</span>
                        <!-- slice(0, 2)限制循环个数 -->
                        <a href="#" v-for="l in job.list.slice(0, 3)" :key="l"
                        :class="{ahover: liNowindex === jindex}" @click="exitSearch(l)">
                            {{l}}
                        </a>

                        <img src="../assets/index/右三角形hei.png" alt="" v-if="liNowindex != jindex">
                        <img src="../assets/index/右三角形白.png" alt="" v-if="liNowindex === jindex">
                    </li>
                    <div class="show-all" @mouseover="showAll()"
                     :class="{hoverHide:showXS == false}">
                        显示全部职位
                    </div>
                    <!-- jobTypeListAll -->
                    <div class="lookalljob" @mouseout="HideAll()" @mouseover="showAll()"
                     :class="{hoverHide:showAllJob === false}">
                        <li v-for="(job,jindex2) in jobTypeList.slice(6,jobTypeList.length-1)" :key="job" @mouseover="achange(jindex2+6)"
                        @mouseout="aout()">
                            <span>{{job.name}}</span>
                            <!-- slice(0, 2)限制循环个数 -->
                            <a href="#" v-for="l in job.list.slice(0, 3)" :key="l" style="display:inline-block"
                            :class="{ahover: liNowindex === jindex2+6}" @click="exitSearch(l)">
                                {{l}}
                            </a>

                            <img src="../assets/index/右三角形hei.png" alt="" v-if="liNowindex != jindex2+6">
                            <img src="../assets/index/右三角形白.png" alt="" v-if="liNowindex == jindex2+6">
                        </li>
                    </div>
                </ul>
                <!-- @mouseout="aout()" -->
                <div class="hover-show" :class="{hoverShwing: slideIndex < jobTypeList.length}"
                v-bind:style='{top:topMargingString}' @mouseleave="slideOut()">
                    <ul v-if="slideIndex < jobTypeList.length" >
                        <p>{{jobTypeList[slideIndex].name}}</p>
                        <li v-for="l in jobTypeList[slideIndex].list" :key="l">
                            <a href="#" @click="exitSearch(l)">
                                {{l}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="banner-right" @mouseover="stopauto()" @mouseout="leaveauto()">
                <div class="btn-pre banner-btn" @click="pre()">
                    <img src="../assets/index/左.png" alt="">
                </div>
                <div class="btn-next banner-btn" @click="next()">
                    <img src="../assets/index/右.png" alt="">
                </div>

                <img :src="imgUrl[imgurlindex]" alt="" class="lunboImg" @click="imgTo()">
                <!-- <swiper effect="fade" style="height:100%">
                    <swiper-slide>
                        <img :src="imgUrl[0]" alt="" class="lunboImg" @click="imgTo(0)">
                    </swiper-slide>
                    <swiper-slide>
                        <img :src="imgUrl[1]" alt="" class="lunboImg" @click="imgTo(1)">
                    </swiper-slide>
                    ...
                </swiper> -->

                <div class="bannerspots">
                    <ul class="spotul">
                        <li v-for="(item,index) in imgUrl" :key="item"
                        :class="{spotsred: imgurlindex === index}"
                        class="spots"
                        ></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 热招职位 -->
        <div id="hot-profession-area">
            <div class="hot-title">热招职位</div>
            <div class="hot-profession-type">
                <router-link to="/">后端开发</router-link>
                <div class="div-point"></div>
                <router-link to="/box2">移动前端开发</router-link>
                <div class="div-point"></div>
                <router-link to="/box3">硬件开发</router-link>
                <div class="div-point"></div>
                <router-link to="/box4">测试</router-link>
                <div class="div-point"></div>
                <router-link to="/box5">运维</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
            <div class="look-more" @click="hotLookMore()">查看更多</div>
        </div>
        <!-- 互联网热门企业 -->
        <div id="hot-net">
            <div class="hot-title">互联网热招企业</div>
            <div style="margin:24px 349px 0 349px;">
                <div class="hot-net-box" v-for="i in companyLists.slice(0 , 8)" :key="i"
                @click="goCDetail(i.companyId,i.abbrName)">
                    <div class="img-div">
                        <img :src="'https://res.mashangu.com/'+i.img" alt="">
                    </div>
                    <p class="pro-name">{{i.abbrName}}</p>
                    <p class="position">{{i.financeName}} | {{i.tradeName}}</p>
                    <div class="hot-btn">
                        <span style="color:#295AF8;">{{i.comPubNum}}</span>个热招职位
                    </div>
                </div>
            </div>
            <div class="look-more" @click="companyLookMore()">查看更多</div>
        </div>
    </div>
</template>
<style>
#img-bar{
    background-image: url('../assets/index/bg_top.png');
    width: 1920px;
    height: 120px;
    background-size: cover;
}

#search .search-box{
    width: 936px;
    margin: 0 auto;
    padding: 24px 0 16px 0;
    position: relative;
}

#search .search-box .tip-box{
    position: absolute;
    width: 794px;
    background-color: white;
    box-shadow: 0 6px 20px -12px #c7c7c7;
    z-index: 10000;
}

.tipboxhide{
    display: none;
}

#search .search-box .tip-box p{
    line-height: 44px;
    margin: 10px 10px;
}
#search .search-textbox{
    width: 794px;
    height: 50px;
    background-color: white;
    border: 1px solid #CCCCCC;
    display: inline-block;
    box-sizing: border-box;
    padding: 14px 24px;
    font-size: 16px;
    outline: none;
}

#search .search-textbox:hover{
    border: 1px solid #2357FF;
}

#search .search-btn{
    width: 140px;
    height: 50px;
    background-color: #295AF8;
    color: white;
    text-align: center;
    display: inline-block;
    line-height: 50px;
    /* 解决div并排错位 */
    vertical-align:top;
}

#search .search-btn:hover{
    background-color: #0537DA;
}

#search .hot-professions{
    color: #9196A4;
    margin-top: 16px;
    font-size: 12px;
}

#search .hot-professions ul{
    display: inline-block;
}

#search .hot-professions ul li{
    margin-left: 27px;
}

#search .hot-professions ul li:hover{
    color: #193EFB;
}

.hot-title{
    font-size: 28px;
    text-align: center;
    margin-top: 40px;
}

/* banner */
#banner{
    width: 1184px;
    margin: 0 auto;
    margin-top: 16px;
    height: 370px;
    /* position: relative; */
}

#banner .banner-left{
    height: 369px;
    width: 320px;
    background-color: white;
    border-radius: 8px 0 0 8px;
    margin-right: 16px;
    display: inline-block;
    /* padding: 10px 0 0px 10px; */
    padding: 10px 0 0px 0px;
    box-sizing: border-box;
    position: relative;
}

#banner .banner-left .show-list{
    position: relative;
}

#banner .banner-left .show-list li{
    width: 310px;
    height: 40px;
    margin: 6px 0 4px 0;
    border-radius: 4px 0 0 4px;
    box-sizing: border-box;
    padding: 11px 10px;
    line-height: 18px;
}

#banner .banner-left .show-list .lookalljob{
    position: absolute;
    background-color: white;
    padding-bottom: 100px;
    width: 320px;
    border-radius: 0 0 0 8px;
    right: 0px;
    top: 300px;
    /* padding-left: 10px; */
    box-sizing: border-box;
}

#banner .banner-left .show-list li span{
   font-weight: bold;
   font-size: 14px;
   margin-right: 10px;
}

#banner .banner-left .show-list li a{
   font-size: 12px;
   margin: 0 10px 0 0;
   color: #61687C;
}

.ahover{
    color: white !important;
}

#banner .banner-left .show-list li:hover{
    color: white !important;
    background-color: #4E89FF;
}

#banner .banner-left .show-list img{
    width: 10px;
    height: 10px;
    float: right;
    margin-top: 5px;
}

#banner .banner-left .show-all{
    color: #61687C;
    font-size: 14px;
    padding-top: 19px;
    width: 280px;
    border-top: 1px dashed #EBEBEB;
    padding-left: 10px;
    height: 39px;
    background-color: white;
    margin:0 auto;
}

#banner .banner-left .hover-show{
    position: absolute;
    top: 0px;
    left: 324px;
    z-index: 300;
    background-color: white;
    width: 408px;
    padding: 24px;
    box-sizing: border-box;
    display: none;
}

.hoverShwing{
    display: block !important;
}

.hoverHide{
    display: none !important;
}

#banner .banner-left .hover-show p{
    color: #141419;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 14px !important;
}

#banner .banner-left .hover-show li{
    width: 120px;
    font-size: 14px;
    margin: 10px 0;
}

#banner .banner-left .hover-show a{
    color: #61687C;
}

#banner .banner-left .hover-show a:hover{
    color: #2B72FF;
}

#banner .banner-right{
    height: 369px;
    width: 848px;
    background-color: white;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    display: inline-block;
    position: absolute;
}

#banner .banner-btn{
    width: 119px;
    height: 369px;
    display: inline-block;
    position: absolute;
}

#banner .banner-btn img{
    width: 20px !important;
    position: absolute;
    top: 174px;
    left: 46px;
}

#banner .btn-pre{
    z-index: 100;
    background-image: linear-gradient(to left, rgba(63, 62, 62,0), rgb(63, 62, 62,0.4));
}

#banner .btn-next{
    z-index: 100;
    left: 749px;
    background-image: linear-gradient(to right, rgba(63, 62, 62,0), rgb(63, 62, 62,0.4));
}

#banner .banner-right img{
    width: 100%;
    position: absolute;
    z-index: 50;
}

#banner .bannerspots{
    margin:0 auto;
    width: 33px;
    height: 5px;
    /* margin-top: -30px; */
    margin-top: 337px;
}

#banner .bannerspots ul{
    position: absolute;
    z-index: 100;
}

#banner .bannerspots .spots{
    float: left;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background-color: white;
    opacity: 0.5;
    margin-left: 10px;
}
#banner .spotsred{
    width: 8px !important;
    height: 5px !important;
    opacity: 1 !important;
}

/* 热招职位 */
#hot-profession-area{
    padding-bottom: 6px;
}

#hot-profession-area .div-point{
    height: 4px;
    width: 4px;
    border-radius: 2px;
    background-color: #C2C6CA;
    display: inline-block;
}

#hot-profession-area .hot-profession-type{
    width: 664px;
    margin: 0 auto;
    margin-top: 34px;
    margin-bottom: 25px;
}

#hot-profession-area .hot-profession-type a{
    margin: 0 36px;
    color: #273B4E;
    padding-bottom: 3px;
}

#hot-profession-area .hot-profession-type a.router-link-exact-active {
  border-bottom: 2px solid #193EFB;
  color: #193EFB;
}

.look-more{
    width: 384px;
    height: 44px;
    border: 1px solid #193EFB;
    color: #193EFB;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
    margin: 16px auto;
}

.look-more:hover{
    background-color: #193EFB;
    color: white;
}

/* 互联网热招职业 */
#hot-net{
    padding-bottom: 32px;
}

#hot-net .hot-net-box{
    width: 284px;
    height: 238px;
    background-color: white;
    margin: 8px;
    display: inline-block;
    text-align: center;
}

#hot-net .img-div{
    width: 56px;
    height: 56px;
    background-color: white;
    margin: 0 auto;
    margin-top: 32px;
}

#hot-net .img-div img{
    width: 56px;
}

#hot-net .pro-name{
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
}

#hot-net .pro-name:hover{
    color: #193EFB;
}

#hot-net .position{
    color: #99A0AB;
    font-size: 14px;
    margin-top: 12px;
}

#hot-net .hot-btn{
    width: 182px;
    height: 36px;
    border: 1px solid #E3E7ED;
    /* margin-top: 24px; */
    line-height: 36px;
    margin: 24px auto;
}
</style>
<script>
import SwiperCore, { EffectFlip } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
import 'swiper/components/effect-flip/effect-flip.scss';
SwiperCore.use([EffectFlip]);

import {getCompanyList} from '../api/companyList'
import {getSearchKeyList} from '../api/search'
export default {
    name:'index',
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
        return {
            companyLists:[],
            imgurlindex:0,
            liNowindex:200,
            showAllJob:false,
            showXS:true,
            slideIndex:200,
            hoverSlideIndex:200,
            topMarging:0,
            topMargingString:'',
            imgUrl:[
                require("../assets/index/banner1.jpg"),
                require("../assets/index/banner2.jpg")
            ],
            jobTypeList:[
                {
                    name:"后端开发",
                    list:["后端开发","Java","PHP",
                        "Python","Node.js","全栈",
                        "C|C++","Node.js","语言|视频|图形开发",
                        "区块链开发","搜索算法","大数据"]
                },
                {
                    name:"移动前端开发",
                    list:["HTML5","Android","IOS","WEB前端","前端开发"]
                },
                {
                    name:"硬件开发",
                    list:["硬件开发","嵌入式","半自动化","系统集成","单片机"]
                },
                {
                    name:"测试",
                    list:["测试工程师","自动化测试","功能测试",
                    "性能测试","软件测试","移动端测试",
                    "硬件测试","游戏测试"]
                },
                {
                    name:"运维",
                    list:["运维工程师","网络工程师","系统管理员","信息安全"]
                },
                {
                    name:"产品",
                    list:["产品经理","产品助理","游戏策划","产品策划"]
                },
                {
                    name:"设计",
                    list:["UI设计师","APP设计","平面设计","交互设计","美术设计","动画设计"]
                },
                {
                    name:"运营|客服",
                    list:["产品运营","电商运营","游戏运营","推广","新媒体运营","客服"]
                },
                {
                    name:"高端职位",
                    list:["技术总监","架构师","技术经理|主管","运维总监",
                    "测试经理","产品总监","设计经理|主管","设计总监","项目经理|主管"]
                },
                {
                    name:"技术支持",
                    list:["售前工程师","售后工程师","实施工程师"]
                },
                {
                    name:"运营|客服",
                    list:["产品经理","产品助理","游戏策划","产品策划"]
                },
                {
                    name:"网络",
                    list:["售前工程师","运维工程师","远程技术支持",
                    "网络售后工程师","信息安全工程师","网络安全工程师"]
                },
                {
                    name:"其他",
                    list:["其他"]
                }
            ],
            hotjobList:[
                "Java","PHP","C++","Web前端","iOS"
            ],
            tipList:[],
            tipshow:0,
            controlTipList:[]
        }
    },
    created(){
        // 自动轮播
        this.autonext();
        getCompanyList(1).then(res =>{
            // console.log(res.data);
            this.companyLists = res.data.data;
            let total = res.data.totalCount;
            let addOne = total % 12;
            if(addOne>0){
                this.totalPages = parseInt(total/12) + 1;
            }
            else{
                this.totalPages = parseInt(total/12);
            }
        })
    },
    methods: {
        onChange(){
            var text = document.querySelector("#sText").value;
            this.inTextBlue = text;
            if(text != ""){
                this.tipshow = 1
            }
            else{
                this.tipshow = 0
            }
            getSearchKeyList(text).then(res => {
                this.tipList = res.data.data
                this.textblue(this.tipList,text)
            })
        },
        textblue(data,text){
            var list = [];
            var list2 = [];
            for(var i = 0 ; i < data.length ;i++){
                list = data[i].name.split(text);
                console.log(list)
                // if(list.length == 3){
                //     list2[i] = list[0] + '<span style="color:#2357FF">'+list[1]+'</span>'+list[2];
                // }
                if(list.length == 1){
                    list2[i] = data[i].name;
                }
                else{
                    if(list[0] == ""){
                        list2[i] = '<span style="color:#2357FF">'+text+'</span>'+list[1];
                    }
                    else{
                        list2[i] = list[0] + '<span style="color:#2357FF">'+text+'</span>'+list[1];
                    }
                }
            }
            this.controlTipList = list2;
        },
        imgTo(imgurlindex){
            if(imgurlindex == 0){
                this.$router.replace('/profession');
            }
            else{
                this.$router.replace('/company');
            }
        },
        tobChange(index){
            this.topMarging = index*50;
            this.topMargingString = this.topMarging + 'px';
        },
        next(){
            this.imgurlindex++;
            if (this.imgurlindex > this.imgUrl.length - 1) {
                this.imgurlindex = 0;
            }
        },
        pre(){
            this.imgurlindex--;
            if (this.imgurlindex < 0) {
                this.imgurlindex = this.imgUrl.length - 1;
            }
        },
        // 自动轮播
        autonext(){
            // setInterval(function(){})这么写的话this会是window对象
            // 用箭头函数this才能拿到组件
            this.timer=setInterval(() =>{
                this.next();
            },2000);
            //lunboImg
        },
        // 鼠标悬浮停止轮播
        stopauto(){
            clearInterval(this.timer);
            this.opacity=1;
        },
        // 鼠标离开继续轮播
        leaveauto(){
            this.autonext();
        },
        achange(jindex){
            this.liNowindex = jindex;
            this.slideIndex = jindex;
            this.tobChange(jindex);
            // console.log(this.liNowindex,jindex)
        },
        aout(){
            this.liNowindex = 200;
        },
        showAll(){
            this.showAllJob = true;
        },
        HideAll(){
            this.showAllJob = false;
        },
        goCDetail(idStr,comName){
            //指定跳转地址
            // this.$router.replace('/companyDetail');
            this.$router.push({
                path:'/recruiting',
                query: {
                    comId:idStr,
                    comName:comName,
                    pages:''
                } 
            })
        },
        search(){
            var text = document.querySelector("#sText").value;
            // alert(text)
            this.$router.push({
                path:'/profession',
                query: {
                    searchkey:text,
                } 
            })
        },
        exitSearch(l){
            // alert(l)
            this.$router.push({
                path:'/recruiting',
                query: {
                    searchkey:l,
                } 
            })
        },
        hideXSm(){
            this.showXS = false;
            // console.log(this.showXS);
        },
        showXSm(){
            this.showXS = true;
            // console.log(this.showXS);
        },
        goCDhotjob(){
            //指定跳转地址
            this.$router.replace('/recruiting');
        },
        toSJob(){
            //指定跳转地址
            this.$router.replace('/profession/professionList');
        },
        slideOut(){
            this.slideIndex = 200;
        },
        companyLookMore(){
            //指定跳转地址
            this.$router.replace('/company');
        },
        hotLookMore(){
            //指定跳转地址
            this.$router.replace('/profession');
        }
    },
}
</script>
